<template>
    <div style="border: 1px solid #ccc;width: 100%">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 500px; overflow-y: hidden;"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onChange="handleChange"
            @onCreated="handleCreated"
        />
    </div>
</template>
<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import {onBeforeUnmount, ref, shallowRef, onMounted, watch} from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {IDomEditor } from "@wangeditor/core";
import {fileView, uploadUrl} from "@/api/upload";
import {useUserStore} from "@/store";
import {MessagePlugin} from "tdesign-vue-next";
import {t} from "@/locales";
const user = useUserStore();
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const valueHtml = ref();
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
const emits = defineEmits(['update:modelValue']);
const props = defineProps({
    mode: {
        type: String,
        default: 'default'
    },
    modelValue: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: '请输入内容...'
    }
});

watch(() => props.modelValue, (val) => {
    valueHtml.value = val;
}, { immediate: true, deep: true });

const toolbarConfig = {}
const editorConfig = {
    placeholder: props.placeholder,
    MENU_CONF: {
        // 图片上传
        uploadImage: {
            server: uploadUrl,
            headers: { [user.tokenHead]: user.token },
            fieldName: 'file',
            maxFileSize: 5 * 1024 * 1024,
            allowedFileTypes: ['image/*'],
            onBeforeUpload: (file: File) => {
                for (const fileKey in file) {
                    if (!file[fileKey].type.startsWith('image')) {
                        MessagePlugin.error(`${t('components.upload.fileType')}!`);
                        return false;
                    }
                }
                return file;
            },
            customInsert(res: any, insertFn: InsertFnType) {
                insertFn(fileView(res.data), res.data, fileView(res.data));
            },
        },
        uploadVideo: {
            server: uploadUrl,
            fieldName: 'file',
            maxFileSize: 50 * 1024 * 1024,
            headers: { [user.tokenHead]: user.token },
            customInsert(res: any, insertFn: InsertFnType) {
                insertFn(fileView(res.data));
            },
        }

    }
}

/**
 * 编辑器值发生变化，动态绑定到v-model中
 * @param editor
 */
const handleChange = (editor: IDomEditor) => {
    emits('update:modelValue', editor.getHtml());
}

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
</script>
